import styled from 'styled-components'
import MSwiper from '@/layout/components/MSwiper/index.jsx'
import React, {useEffect, useState} from 'react'
import {
  activityHotRankApi,
  activityImprintApi,
  bannerListApi,
  latestActivityApi,
  recommendApi,
  rewardListApi
} from '../../api/activity.js'
import {ActiveHotList, ActivityImprints, RewardThePreferredItem} from './components/index.jsx'
import {MLabel} from '../home/components/index.jsx'
import {ActiveItem} from '@/views/personalCenter/components/index.jsx'
const Container = styled.div`
    height: 100%;
    background: #F4F4F4;

    .box-1 {
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 40px;
        background: #f4f4f4;
        .activity-box {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            margin-top: 30px;
            justify-content: space-between;
        }
        .reward-the-preferred{
            width: 1200px;
            margin: 0 auto;
            margin-top: 40px;
            .reward-the-preferred-list{
                display: grid;
                grid-template-columns: repeat(2,590px);
                gap:20px;
                margin-top: 20px;
            }
        }

        .featured-picks{
            width: 1200px;
            margin: 0 auto;
            margin-top: 40px;
            .featured-picks-list{
                display: grid;
                grid-template-columns: repeat(4,280px);
                gap: 20px 27px;
                margin-top: 20px;
            }
        }
    }
    .box-2 {
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 40px;
        padding-top: 30px;
        background: #e8e8e8;
        .latest-events{
            width: 1200px;
            margin: 0 auto;
            .latest-events-list{
                display: grid;
                grid-template-columns: repeat(4,280px);
                gap: 20px 27px;
                margin-top: 20px;
            }
        }
    }


`
export default function activityPage() {
  const [swiperList, setSwiperList] = useState([])
  const [hotRankList, setHotRankList] = useState([])
  const [imprintList, setImprintList] = useState([])
  const [rewardList, setRewardList] = useState([])
  const [recommendList, setRecommendList] = useState([])
  const [LatestActivityList, setLatestActivityList] = useState([])
  useEffect(() => {
    getBannerList()
    getHotRankList()
    getActivityImprint()
    getRewardList()
    getRecommendList()
    getLatestActivityList()
  }, [])

  // 轮播图
  async function getBannerList() {
    const res = await bannerListApi({
      module_type: 2
    });
    if (res.result.status_info.status_code !== 100) {
      setSwiperList([])
      return
    }
    setSwiperList(res.result.banner_list)
  }

  // 活动热榜
  async function getHotRankList() {
    const res = await activityHotRankApi({cover_format: "s"});
    if (res.result.status_info.status_code !== 100) {
      setHotRankList([])
      return
    }
    setHotRankList(res.result.popularity_resource_list.splice(0, 3) || [])

  }

  // 活动印记
  async function getActivityImprint() {
    const res = await activityImprintApi({cover_format: "m"});
    if (res.result.status_info.status_code !== 100) {
      setImprintList([])
      return
    }
    setImprintList(res.result.presses_imprint_list.splice(0, 6) || [])

  }
  // 奖励优选榜
  async function getRewardList(){
    const res = await rewardListApi({
      cover_format: "m"
    });
    if (res.result.status_info.status_code!== 100) {
      setRewardList([])
      return
    }
    setRewardList(res.result.reward_activity_list.splice(0, 4) || [])
  }
  async function getRecommendList(){
    const res = await recommendApi({ cover_format: "m" });
    if (res.result.status_info.status_code!== 100) {
      setRecommendList([])
      return
    }
    const result = res.result.recommend_activity_list?.map(item=>({
      ...item,
      active_status_name:item.status_str,
      active_status: item.status,
      active_time_format:item.period,
      logo_url:item?.press?.logo_url,
      press_name: item?.press?.press_name,
    }))
    setRecommendList(result)
  }

  async function getLatestActivityList(){
    const res = await latestActivityApi({ cover_format: "m" });
    if(res.result.status_info.status_code!== 100){
      setLatestActivityList([])
      return
    }
    const result = res.result.latest_activity_list?.map(item=>({
      ...item,
      active_status_name:item.status_str,
      active_status: item.status,
      active_time_format:item.period,
      logo_url:item?.press?.logo_url,
      press_name: item?.press?.press_name,
    }))
    setLatestActivityList(result)
  }

  return (<>
    <Container>
      <div className={'box-1'}>
        <MSwiper list={swiperList}/>
        <div className={'activity-box'}>
          <ActiveHotList list={hotRankList}/>
          <ActivityImprints list={imprintList}/>
        </div>
        <div className={'reward-the-preferred'}>
          <MLabel leftText={'奖励优选榜'}></MLabel>
          <div className={'reward-the-preferred-list'}>
            {
              rewardList.map((item, index) => <RewardThePreferredItem detail={item} key={index}></RewardThePreferredItem>)
            }
          </div>
        </div>
        <div className={'featured-picks'}>
          <MLabel leftText={'精选推荐'} letIcon={'specialColumn/hg.png'}></MLabel>
          <div className={'featured-picks-list'}>
            {
              recommendList.map((item, index) => <ActiveItem detail={item} key={index}></ActiveItem>)
            }
          </div>
        </div>

      </div>
      <div className={'box-2'}>
        <div className={'latest-events'}>
          <MLabel leftText={'最新活动'}></MLabel>
          <div className={'latest-events-list'}>
            {
              LatestActivityList.map((item, index) => <ActiveItem detail={item} key={index}></ActiveItem>)
            }
          </div>

        </div>
      </div>

    </Container>
  </>)
}